<template>
    <div>
        <School :getSchoolName="getSchoolName"></School>
        <h1 v-if="schoolName">{{schoolName}}</h1>
        <hr>
<!--        <Student @atguigu="getStudentName" -->
<!--                 name="张三"-->
<!--                 :age="19"-->
<!--                 sex="男"-->
<!--        ></Student>-->

        <student ref="student" name="张三" :age="19"  sex="男"></student>
        <h1 v-if="studentName">{{studentName}}</h1>
    </div>
</template>
<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
export default {
    name:'App',
    components: {School, Student},
    data(){
        return {
            schoolName:"",
            studentName:""
        }
    },
    methods:{
        getSchoolName(name){
            console.log("school name: ", name);
            this.schoolName = name;
        },
        getStudentName(name, ...params){
            console.log("student name: ", name,params);
            this.studentName = name;
        }
    },
    mounted(){
        this.$refs.student.$on("atguigu", this.getStudentName)
    }
}
</script>
